<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 后代选择器：可以有多个选择器组合而成 */
        /* 查找所有无序列表下的列表项 */
        ul li {
            color: red;
        }
        /* 查找所有有序列表下的列表项 */
        /* 后代 */
        ol li {
            color: blue;
        }
        .p1 b {
            color: green;
        }
        .p2 span b {
            color: orange;
        }
        /* 子代选择器 */
        .p2 > b {
            color: darkred;
        }
    </style>
</head>
<body>
    <p class="p1">
        <b>加粗1</b>
        <i>倾斜</i>
        <b>加粗2</b>
        <b>加粗3</b>
        <b>加粗4</b>
    </p>
    <p class="p2">
        <b>加粗5</b>
        <i>倾斜</i>
        <b>加粗6</b>
        <b>加粗7</b>
        <b>加粗8</b>
        <span>
            <b>加粗9</b>
            <b>加粗10</b>
        </span>
    </p>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>火龙果</li>
        <li>橘子</li>
    </ul>
    <ol>
        <li>白夜破晓</li>
        <li>唐朝诡事录</li>
        <li>三大队</li>
    </ol>
</body>
</html>